<template>
	<view class="page">
		<view class="top">
			<view class="uni-padding-wrap uni-common-mt ">
				<uni-segmented-control :current="current" :values="items" :style-type="styleType" :active-color="activeColor" />
			</view>
			<view class="list"><navigator url="model"><text>列表</text></navigator></view>
		</view>
		<view class="titles">常见疾病</view>
		<view class="common-diseases-box">
			<text v-for="(item,index) in commonDiseases" :key="index">{{item}}</text>
		</view>
		<view class="types-box">
			<view class="types-left">
				<view v-for="(item,index) in types" :key="index" :class="{'selected':index==currentIndex}" @click="currentIndex = index">
					<image :src="item.icon"></image>
					<text>{{item.typeName}}</text>
				</view>
			</view>
			<view class="types-right">
				<navigator v-for="(item,index) in types[currentIndex].subTypes" :key="index" url="question">
					<text>{{item}}</text>
					<image src="http://yao.hayzon.com/static/selfDescription/arrow.png" class="arrow"></image>
				</navigator>
			</view>
		</view>
	</view>
</template>

<style>
	.page {
		background-color: #ffffff;
	}

	.top {
		display: flex;
	}
	.segmented-control{
		margin-left:0;
	}
	.list {
		background-color:#eb6350;
		background-image: url('http://yao.hayzon.com/static/selfDescription/p.png');
		background-size:40%;
		background-repeat: no-repeat;
		margin-top: 30upx;
		margin-right:30upx;
		width: 170upx;
		color: #fff;
		text-align: right;
		padding-right:20upx;
		border-radius: 15upx;
	}

	.list text {
		margin-left: 50upx;
		line-height: 60upx;
	}

	.titles {
		padding-left: 30upx;
		padding-right: 30upx;
		font-size: 1.2em;
		font-weight: bold;
		color: #a7412d;
	}

	.common-diseases-box {
		margin-top: 15upx;
		display: flex;
		flex-wrap: wrap;
		padding-left: 30upx;
		padding-right: 30upx;
	}

	.common-diseases-box text {
		font-size: 1.1em;
		display: inline-block;
		line-height: 55upx;
		border: solid 1px #cbb794;
		margin-right: 10upx;
		border-radius: 30upx;
		padding-left: 20upx;
		padding-right: 20upx;
		margin-bottom: 15upx;
	}

	.arrow {
		width: 55upx;
		height: 55upx;
	}

	.types-box {
		margin-top: 10upx;
		display: flex;
	}

	.types-left {
		width: 40%;
	}

	.types-right {
		width: 60%;
	}

	.types-left view {
		display: flex;
		border-right: #cbb794 1px solid;
		border-bottom: #cbb794 1px solid;
		padding: 30upx;
		background-color: #efefed;
		font-size: 1.2em;
		color: #666666;
	}

	.types-left view image {
		width: 80upx;
		height: 80upx;
		background-color: #999999;
		border-radius: 50upx;
		margin-right: 15upx;
		flex-shrink: 0;
	}

	.types-left view.selected {
		background-color: #ffffff;
		position: relative;
	}

	.types-left view.selected:after {
		content: " ";
		width: 10upx;
		background-color: #fe5746;
		position: absolute;
		height: 100%;
		left: 0;
		top: 0;
	}

	.types-left view.selected image {
		background-color: #fe5746;
	}

	.types-right navigator {
		border-bottom: #cbb794 1px solid;
		padding: 40upx;
		padding-left: 10upx;
		background-color: #ffffff;
		font-size: 1.2em;
		color: #666666;
		position: relative;
	}

	.types-right navigator image {
		position: absolute;
		right: 0;
		top: 40upx;
	}
</style>

<script>
	import uniSegmentedControl from '@/components/uni-segmented-control/uni-segmented-control.vue'

	export default {
		components: {
			uniSegmentedControl
		},
		data() {
			return {
				items: ['男', '女', '儿童'],
				activeColor: '#eb6350',
				styleType: 'button',
				commonDiseases: ["咳嗽", "便秘", "腰痛", "阳痿", "感冒", "失眠", "口腔溃疡", "胃痛、胃胀"],
				types: [{
						typeName: "全身",
						icon: "http://yao.hayzon.com/static/selfDescription/01.png",
						subTypes: ["感冒", "失眠", "肥胖", " 咳吐涎沫", "异常出汗", "身体、眼睛、小便发黄", "水肿", "神疲乏力，不能缓解", "心情低落、忧愁", "多饮多食多尿，形体消瘦", "癫痫",
							"高血压", "中风"
						]
					},
					{
						typeName: "头颈面口",
						icon: "http://yao.hayzon.com/static/selfDescription/02.png",
						subTypes: ["头痛或偏头痛", " 口腔溃疡", " 牙痛", " 咽痛，吞咽时加重", " 眩晕", " 嘴唇反复肿胀,干裂", " 颈前肿大", " 记忆力减退", " 面部麻木,口眼歪斜", " 脱发"]
					},
					{
						typeName: "耳鼻喉",
						icon: "http://yao.hayzon.com/static/selfDescription/03.png",
						subTypes: ["鼻炎", " 口腔溃疡", " 咽喉干痒，有异物感", " 耳鸣耳聋", " 鼻窦炎", " 鼻出血", " 咽部异物感", " 声音嘶哑，不能发声", " 耳痛流脓,听力减退"]
					},
					{
						typeName: "心胸",
						icon: "http://yao.hayzon.com/static/selfDescription/04.png",
						subTypes: ["心慌", " 咳嗽", " 胁肋部疼痛不适", " 咳吐涎沫", " 发热咳嗽,胸痛，咳脓痰"]
					}, {
						typeName: "腹部",
						icon: "http://yao.hayzon.com/static/selfDescription/05.png",
						subTypes: ["便秘", "腹泻", "胃痛、胃胀", "痢疾", "呕吐", "饮食不下或食入即吐", "腹部疼痛", "打嗝", "痔疮"]
					},
					{
						typeName: "腰背",
						icon: "http://yao.hayzon.com/static/selfDescription/06.png",
						subTypes: ["腰痛", "腰椎间突出", "骨质疏松"]
					},
					{
						typeName: "四肢关节",
						icon: "http://yao.hayzon.com/static/selfDescription/07.png",
						subTypes: ["足后跟疼痛", "颈部僵硬", "关节疼痛、肿胀", "肌肉萎缩无力"]
					},
					{
						typeName: "皮肤",
						icon: "http://yao.hayzon.com/static/selfDescription/08.png",
						subTypes: ["痤疮", " 荨麻疹", "湿疹", " 带状疱疹", " 牛皮癣"]
					},
					{
						typeName: "泌尿生殖",
						icon: "http://yao.hayzon.com/static/selfDescription/09.png",
						subTypes: ["阳痿", " 遗精", " 早泄", " 异常勃起", " 不育", " 尿频，尿痛，尿不尽", " 小便排出困难", " 尿中带血", " 小便浑浊", " 前列腺炎", " 前列腺增生",
							" 肾炎"
						]
					}
				],
				currentIndex: 3
			}
		}
	}
</script>
